<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 这引用的是vue3的, 这里会报错 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  <!-- 直接使用vue2的源文件 -->
  <script src="./vue.js"></script>
</head>

<body>
  <div id="app">
    原始数据: xxxxxx
    <input type="text" v-model='rowObj.rowUrl' >
    <hr>
    处理后的数据: 
    <div>url: {{newUrl}}</div>
    <div>query: {{querys}}</div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data(){
        return {
          // 初始的数据对象
          rowObj:{
            rowUrl:'',
            // 其他数据
            name: 'kobe',
            age:43
          },
          // 处理后的url对象
          newUrl: '',
          querys:''
        }
      },
      computed:{
        newData() {
        return this.rowObj.rowUrl
      }
      },
      watch:{
        'rowObj.rowUrl'(newVal, oldVal){
          // 这里最好再抽一个函数出来, 单独进行处理操作. 这里就意思意思.
          // this.handleUrl(newVal, '?')

          // 如果有新的输入, 并且输入中带有你想要的那个spilter, 就进行. 
          if(newVal && newVal.includes('?')) {
            this.newUrl = newVal.split('?')[0]
            this.querys = newVal.split('?')[1]
          }
        },
        newData(newVal, oldVal){
          console.log('old',oldVal, 'new',newVal);
        }
      },
      methods: {
        // handleUrl(newVal, spilter){
        //   this.newUrl = newVal.spilt(spilter)[0]
        // }
      }
    })
  </script>
</body>
</html>

<script>
 
</script>